<template>
    <div 
     style="background-color:#eae9e5;
     display: flex;
     justify-content: space-between;
     align-items: center;">
        <div 
        @click="reMySetup" 
        style="color:#c1ab96;
        padding: 20px 20px 20px 0;
        font-size:12px;
        font-size: 20px;"  
        span="9"><van-col 
                    style="color:#c2ad98;
                    padding: 5% 0px 5% 60%;
                    margin-left:3% ;"
                    span="9">
                    <van-icon name="arrow-left" size="20"/>
                </van-col></div>
        <div 
        style="font-weight:1000;
        padding: 20px 20px 20px 0px"
            span="10">通用</div>
        <div></div>
    </div>
    
    <div 
    style="display:flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #cab9a5 1px solid;
    padding:20px 0 20px 0;
    width: 90%;
    margin-left: 5%;
    ">
        <div ><p
        style="font-size:14px"
        >开启位置服务</p>
        <p
        style="font-size:12px;
        color: grey;"
        >我们将根据您的位置为您提供个姓化的本地服务</p>
    </div>
    <van-switch v-model="checked" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
    </div>
    
    <div 
    style="display:flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #cab9a5 1px solid;
    width: 90%;
    padding:20px 0 20px 0;
    margin-left: 5%;
    ">
        <div ><p
        style="font-size:14px"
        >WIFI下自动播放视频</p>
        <p
        style="font-size:12px;
        color: grey;"
        >开启后,商品及直播视频将在WIFI下自动播放</p>
    </div>
    <van-switch v-model="checked1" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
    </div>
    
    <div 
    style="display:flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 0 20px 0;
    border-bottom: #cab9a5 1px solid;
    width: 90%;
    margin-left: 5%;
    ">
        <div ><p
        style="font-size:14px"
        >自动开启流量模式</p>
        <p
        style="font-size:12px;
        color: grey;"
        >开启后，将自动将图片等内容转为低分辨率展示</p>
        </div>
        <van-switch v-model="checked2" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
    </div>

    <div 
    style="display:flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 0 20px 0;
    border-bottom: #cab9a5 1px solid;
    width: 90%;
    margin-left: 5%;
    ">
        <div ><p
        style="font-size:14px"
        >自动免密支付</p>
        <p
        style="font-size:12px;
        color: grey;"
        >开启后，支付将省去输入密码步骤</p>
        </div>
        <van-switch v-model="checked3" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
    </div>
    
    <div 
    style="display:flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 0 20px 0;
    border-bottom: #cab9a5 1px solid;
    width: 90%;
    margin-left: 5%;
    ">
        <div ><p
        style="font-size:14px"
        >清除缓存</p>
    </div>
        <span style="color:darkgray" @click="delite">{{neichun}}</span>
    </div>
</template>
<script lang="ts" setup>
    import { ref,createApp } from 'vue';
    import { CountDown } from 'vant';
    import {useRouter} from 'vue-router';
    const $router = useRouter();
    
    //控制开关
    const checked = ref(true);
    const checked1 = ref(false);
    const checked2 = ref(true);
    const checked3 = ref(true);
    
    //清楚内存
    let neichun = ref("153.2MB")
    function delite(){
        neichun = ref("0.00MB")
    }
    // const show = ref(false);
    // const showPopup = () => {
    //   show.value = true;
    // };
    
    //取消个人信息编辑
    function reMySetup(){
        $router.push({path:"setUp"})
        console.log(1111);
    } ;
</script>
<style scoped>
</style>